<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>贷款申请</title>


    <link href="css/all.css" rel="stylesheet" type="text/css">
    <link href="js/editor/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="js/editor/css/froala_editor.min.css" rel="stylesheet" type="text/css">
    
</head>

<body style="background-color: #e6ecf5">
    <div class="book_con01" id="app">

        <form id="form_demo">
            <p class="book_p">
            <table class="book_table" border="1" cellpadding="10">
                <tr>
                    <td colspan="4" style="text-align: center">
                        <h1 class="book_h01">贷款申请</h1>
                    </td>
                </tr>

                <tr>
                    <td><label class="td_label">申请客户</label></td>
                    <td>
                        <select name="cusId" v-model="formData.customerId" @change="showMortgages">
                            <option value="0">---请选择---</option>
                            <option :value="customer.id" v-for="(customer,index) in customers" :id="index">
                                {{customer.user.name}}</option>
                        </select>
                    </td>

                    <td><label class="td_label">产品选择</label></td>
                    <td>
                        <select name="proId" v-model="formData.proId">
                            <option value="0">---请选择---</option>
                            <option :value="product.id" v-for="(product,index) in products" :id="index">{{product.name}}
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label class="td_label">贷款金额</label></td>
                    <td><input type="text" class="book_input03" v-model="formData.money" /></td>

                    <td><label class="td_label">收款账号</label></td>
                    <td>
                        <input type="text" class="book_input03" v-model="formData.acceptAccount" />
                    </td>

                </tr>
                <tr>
                    <td><label class="td_label">审批人</label></td>
                    <td>
                        <select v-model="empId">
                            <option value="0">---请选择---</option>
                            <option :value="emp.id" v-for="(emp,index) in emps">{{emp.name}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td> <label class="td_label">抵押资产</label><i class="i_start"></i>
                    </td>
                    <td colspan="3">
                        <span v-for="(mortgage,index) in mortgages">
                            <input type="checkbox" minlength="2" :value="mortgage.id" v-model="formData.mortgageIds">{{mortgage.name}}
                        </span>
                    </td>

                </tr>


                <tr>
                    <td><label class="td_label">描述</label></td>
                    <td colspan="3">
                        <textarea class="textArae" id="editor"></textarea>
                    </td>

                </tr>

                <tr>
                    <td>
                        <label class="td_label">附件</label>
                    </td>
                    <td colspan="5">
                        <p><label class="td_label">文件1</label><input type="file" value="选择文件" /></p>
                        <p><label class="td_label">文件2</label><input type="file" value="选择文件" /> </p>
                        <p><label class="td_label">文件3</label><input type="file" value="选择文件" /></p>
                        <p><label class="label_red">附件总大小不能超过200M，超过限制,将不能发送</label></p>
                    </td>

                </tr>


            </table>
            </p>
            <p class="book_foot">
                <input type="button" @click="add" value="提交申请" />
                <input type="button" value="存为草稿" />
                <input type="button" value="重置" />
                <input type="button" value="取消" />
            </p>
        </form>
    </div>
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/editor/js/froala_editor.min.js"></script>

    <script src="js/editor/js/plugins/tables.min.js"></script>
    <script src="js/editor/js/plugins/lists.min.js"></script>
    <script src="js/editor/js/plugins/colors.min.js"></script>
    <script src="js/editor/js/plugins/media_manager.min.js"></script>
    <script src="js/editor/js/plugins/font_family.min.js"></script>
    <script src="js/editor/js/plugins/font_size.min.js"></script>
    <script src="js/editor/js/plugins/block_styles.min.js"></script>
    <script src="js/editor/js/plugins/video.min.js"></script>
    <script src="js/date/js/laydate.js"></script>

    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/global.js"></script>
    <script>
        $(function () {
            $('#editor').editable({ inlineMode: false, alwaysBlank: true })
        });
    </script>
    <script>
        $.validator.setDefaults({
            submitHandler: function () {
                alert("修改成功");
            }
        });
        $().ready(function () {
            $("#form_demo").validate();
        });
    </script>
    <script>
        !function () {
            laydate.skin('danlan');//
            laydate({ elem: '#demo' });
            laydate({ elem: '#demo1' });//
        }();
    </script>

    <script>
        new Vue({
            el: "#app",
            created() {
                /*
                *获取客户列表
                */
                axios.post(server + '/api/customer/condition')
                    .then(response => {
                        let result = response.data;
                        if (result.code == 200) {
                            this.customers = result.data;
                            console.log("customer---->");
                            console.log(this.customers);
                        }
                    });

                /*
                *获取产品列表
                */
                axios.post(server + '/api/product/getAll')
                    .then(response => {
                        console.log(response);
                        let result = response.data;
                        if (result.code == 200) {
                            this.products = result.data;
                        }
                    });

                /*
            *获取emp列表
            */
                axios.post(server + '/api/emp/list')
                    .then(response => {
                        console.log("emps-----------------------------|")
                        console.log(response);
                        let result = response.data;
                        if (result.code == 200) {
                            this.emps = result.data;
                        }
                    });

                

            },
            data() {
                return {
                    customers: "",
                    products: "",
                    emps: "",
                    mortgages: "",
                    empId: 0,
                    formData: {
                        customerId: 0,
                        proId: 0,
                        acceptAccount: "",
                        money: "",
                        mortgageIds:[]
                    }

                }
            },
            methods: {
                showMortgages() {
                    console.log("show");
                    /*
                *获取客户的资产列表
                */
                axios.post(server + '/api/mortgage/byCid/'+this.formData.customerId)
                    .then(response => {
                        console.log(response);
                        let result = response.data;
                        if (result.code == 200) {
                            this.mortgages = result.data;
                        }
                    });
                },

                /*

                *提交申请
                */
                add(){
                    console.log("申请信息---------------");
                    console.log(this.formData);
                    axios.post(server + '/api/app/add',this.formData)
                    .then(response => {
                        console.log(response);
                        let result = response.data;
                        if (result.code == 200) {
                            alert("提交成功!请等待审核");
                        }
                    });
                }
            },
        });
    </script>
</body>

</html>